// 1 导入react
import React from 'react'
import ReactDOM from 'react-dom'



// 引入css文件
import "./index.css"

//表单处理 form-handler
// 受控组件
// HTML中的表单元素是可以输入的 也就是自己的可变状态
//而 React中可变状态通常保存在state中 并且只能通过setState()方法修改
//React将state与表单元素值value绑定到一起 由state的值来控制表单元素的值

class MyState extends React.Component {

    constructor() {
        super()
        this.state = {
            text: "",
            content: "",
            city: "sz",
            isCheckd: true
        }
    }


    // handerChange = e => {
    //     this.setState({
    //         text: e.tagrget.value
    //     })
    // }

    // handerContent = e => {
    //     this.setState({
    //         content: e.tagrget.value
    //     })
    // }

    // handerCity = e => {
    //     this.setState({
    //         city: e.tagrget.value
    //     })
    // }

    // handerIsCheckd = e => {
    //     this.setState({
    //         isCheckd: e.tagrget.value
    //     })
    // }

    // 状态组件优化

    handerForm = e => {
        const target = e.target

        //根据类型获取值
        const value = target.type === 'checkbox' ? target.checked : target.value
        const name = target.name;
        this.setState({
            [name]: value
        })
    }

    render() {
        console.log("render")
        console.log(this.state)
        return (
            <div>
                <h2>
                    这是状态组件
                </h2>
                <div>
                    {/* 文本框 */}
                    <input type="text" name="text" value={this.state.text} onChange={this.handerChange} />
                    <br />
                    {/* 富文本框 */}
                    <textarea value={this.content} name='content' onChange={this.handerContent}></textarea>
                    <br />
                    {/* 下拉框 */}
                    <select name="city" id="" value={this.state.city} onChange={this.handerCity}>
                        <option value="sh">上海</option>
                        <option value="bj">北京</option>
                        <option value="sz">深圳</option>
                    </select>
                    <br />
                    {/* 复选框 */}
                    <input type="checkbox" name="isCheckd" id="" checked={this.state.isCheckd} onChange={this.handerIsCheckd} />
                </div>
                <h2>
                    状态组件优化
                </h2>
                <div>
                    {/* 文本框 */}
                    <input type="text" name="text" value={this.state.text} onChange={this.handerForm} />
                    <br />
                    {/* 富文本框 */}
                    <textarea value={this.content} name='content' onChange={this.handerForm}></textarea>
                    <br />
                    {/* 下拉框 */}
                    <select name="city" id="" value={this.state.city} onChange={this.handerForm}>
                        <option value="sh">上海</option>
                        <option value="bj">北京</option>
                        <option value="sz">深圳</option>
                    </select>
                    <br />
                    {/* 复选框 */}
                    <input type="checkbox" name="isCheckd" id="" checked={this.state.isCheckd} onChange={this.handerForm} />
                </div>
            </div>

        )
    }
}


// 总结 文本框 富文本框 下拉框 操作的是value属性
// 复选框 操作的checkd属性



//3 渲染react元素
ReactDOM.render(<MyState />, document.getElementById('root'))
